<script setup>
import {defineProps} from 'vue'
import { useRouter } from 'vue-router';
const props = defineProps({
    movieList:{
        type:Array,
        default:() => []
    },
    cateTitle:{
        type:String,
        default:'分类名称'
    }
})

const router = useRouter()

// 点击单项卡片跳转处理函数
let movieInfoClickHandler = (item) => {
  router.push({path:'/detail',query:{path:item.item_path}})
}
</script>


<template>
    <div class="cc-container">
        <div class="cate-title">
     <h2>{{cateTitle}}</h2>
    </div>    
    <div class="hit-movie-container">
        <div class="hit-movie-center">
          <ul class="hit-movie-list">
            <li class="hit-movie-item" v-for="(item) in movieList" :key="item.item_cover" @click="movieInfoClickHandler(item)">
              <div class="top">
                <img class="movie-cover" v-lazy="item.item_cover" alt="" srcset="">
              </div>
              <div class="bottom">
                <div class="movie-title">{{ item.item_title }}</div>
                <div class="movie-date">{{ item.item_date}}·{{ item.item_type}}</div>
              </div>
              <div class="tag">{{ item.item_other }}</div>
              <div class="model">

              </div>
            </li>
          </ul>
        </div>
    </div>
    </div>
</template>

<style lang="less" scoped>
.cc-container {
    background: rgb(239, 243, 245);
}
.cate-title {
    width: 100%;
    background: rgb(239, 243, 245);
    h2 {
        position: relative;
        padding-left: 10px;
        padding-top: 20px;
        margin: 0px auto 20px auto;
        display: block;
        width: 1290px;
        box-sizing: border-box;
        max-width: 100%;
        &::after {
            content: "";
            display: block;
            width: 3px;
            border-radius: 50px;
            height: 22px;
            background-color: blueviolet;
            position: absolute;
            left: 0px;
            top: 50%;
            transform: translateY(calc(-50% + 11px));

        }
    }
}
.hit-movie-container {
  background: rgb(239, 243, 245);
  width: 100%;
  // max-width: 100%;
  .hit-movie-center {
    width: 1300px;
    max-width: 100%;
    margin: 0 auto;
    background: rgb(239, 243, 245);
    .hit-movie-list {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      .hit-movie-item {
        position: relative;
        box-sizing: border-box;
        width: 16.66666666666667%;
        padding-right: 24px;
        padding-bottom: 24px;
        .top {
          width: 100%;
          overflow: hidden;
          border-radius: 12px;
          .movie-cover {
            position: relative;
            border-radius: 12px;
            width: 100%;
            height: 280px;
            object-fit: cover;
            transition: .3s;
            overflow: hidden;    
            cursor: pointer;      
            &:hover {
              transform: rotate(5deg) scale(1.4);
            }
          }
        }
        .bottom {
          .movie-title {
            box-sizing: border-box;
            width: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            font-size: 16px;
            color: #000000;
            padding: 6px 0px;
          }
          .movie-date {
            box-sizing: border-box;
            width: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            font-size: 14px;
            color: #666565;
            // padding: 6px 0px;
          }
        }
        .tag {
          position: absolute;
          right: 34px;
          top: 10px;
          background: rgb(133, 77, 250,.5);
          color: #fff;
          font-size: 12px;
          padding: 3px 5px;
          border-radius: 6px;
        }
      }
    }
  }
}

@media screen and (max-width:480px){
  .hit-movie-item {
    border-radius: 4px !important;
    width: 33.33333333333333% !important;
    padding-right: 4px !important;
    padding-bottom: 4px !important;
    .top {
      border-radius: 4px !important;
      .movie-cover {
        border-radius: 4px !important;
        height: 200px !important;
      }
    }
  } 
}
</style>